import React, {useEffect, useState} from "react";
import { Form, Input, Button, Card, Checkbox, message, Col, Row, Image, Flex, Modal } from 'antd';
import { getCaptcha, login, register } from '../../services';
import { setSession } from '@bastet/utils';
import { useNavigate } from "react-router-dom";
import './login-style.less';


const Index:React.FC = () => {
  const [svg, setSvg] = useState<string>();
  const [loading, setLoading] = useState<boolean>();
  const navigate = useNavigate();
  const [form] = Form.useForm();

  useEffect(() => {
    loadCaptcha()
  }, []);

  const loadCaptcha = () => {
    getCaptcha().then((res: any) => {
      setSvg(`data:image/svg+xml;base64,${btoa(res.data)}`)
    })
  }

  const routeToHome = (token: any) => {
    setSession('token', token);
    // 跳转到首页
    setTimeout(() => {
      navigate('/', { replace: true })
    }, 1000)
  }

  const onFinish = (data: any) => {
    setLoading(true)
    login(data).then(({ data, code}) => {
      if (code === 200) {
        message.success('登陆成功！');
        routeToHome(data)
      }
    }).finally(() => {
      setLoading(false)
    });
  };

  const onRegister = () => {
    setLoading(true)
    register(form.getFieldsValue()).then(({ data, code }) => {
      if (code === 200) {
        message.success('注册完成，登陆成功！');
        routeToHome(data)
      }
    }).finally(() => {
      setLoading(false)
    });
  };

  return (
    <div >
      <Card className='login-card'>
        <Form
          form={form}
          name="normal_login"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          className='login-index'
        >
          <Form.Item>
            <h3 className='login-title'>Welcome  KoaSystem</h3>
          </Form.Item>
          <Form.Item
            name="account"
            rules={[{ required: true, message: '请输入你的账号!' }]}
          >
            <Input placeholder="账号" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入你的密码!' }]}
          >
            <Input.Password placeholder="密码" />
          </Form.Item>
          <Form.Item>
            <Row gutter={8}>
              <Col span={16}>
                <Form.Item
                  name="captcha"
                  noStyle
                  rules={[{ /*required: true, */message: '请输入验证码!' }]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Image src={svg} preview={false} onClick={loadCaptcha}/>
              </Col>
            </Row>
          </Form.Item>

          <Form.Item>
            <Flex justify="space-between" align="center">
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住密码</Checkbox>
              </Form.Item>
              <a href="/register">忘记密码</a>
            </Flex>

          </Form.Item>
          <Form.Item>
            <Row gutter={8}>
              <Col span={16}>
                <Button type="primary" htmlType="submit" block loading={loading}>
                  登录
                </Button>
              </Col>
              <Col span={8}>
                <Button htmlType="button" block loading={loading} onClick={onRegister}>
                  注册
                </Button>
              </Col>
            </Row>

          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Index